<script>
export default {
  name: "ta-buoy",
  props: ["buoy", "theme"],
  computed: {
    themeClass() {
      if (this.theme == "blue") {
        return "buoy-box-text-theme-blue";
      } else {
        return "buoy-box-text-theme-blue";
      }
    },
  },
  render(createElement) {
    let buoy = this.buoy;
    let buoyTypeof = typeof buoy;
    if (buoy) {
      if (buoyTypeof == "string" || buoyTypeof == "number") {
        return createElement("span", {
          class: ["buoy-box", "buoy-box-text", this.themeClass],
          domProps: {
            innerText: buoy,
          },
        });
      } else {
        return createElement("span", {
          class: ["buoy-box", "buoy-box-radius", this.themeClass],
        });
      }
    } else {
      return null;
    }
  },
};
</script>

<style lang="scss" scoped>
.buoy-box {
}
.buoy-box-text {
  height: 20px;
  line-height: 20px;
  display: inline-block;
  padding: 0px 8px;
  border-radius: 4px;
  font-size: 12px;

  margin-right: 6px;
}
.buoy-box-radius {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}

.buoy-box-text-theme-blue {
  background: rgb(5, 84, 202);
  color: white;
}
</style>
